<template>
    <router-link to="">
        <div class="goods">
            <img width="173" height="173" :src="goods.img" alt="">
            <div class="label">
                {{ goods.type ? '视频' : "课程" }}
            </div>
            <div class="desc">
                <p>{{ goods.title }}</p>
            </div>
            <div class="price">
                <span><i>¥</i>{{ goods.price }}</span>
                <span>¥{{ goods.old_price }}</span>
                <span @click="addToCart(goods.id)" class="shoping"><img width="17" src="./卖家购物车.png" alt=""></span>
            </div>
        </div>
    </router-link>
</template>
<script lang="ts" setup>
import { defineProps } from "vue"
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
defineProps({
    goods: {
        type: Object,
        default: () => ({})
    },
    type: {
        type: String,
        default: "kecheng"
    }
})
function addToCart(id: number) {
    counter.increment()
}
</script>

<style lang="less" scoped>
.goods {
    position: relative;
    width: 334rem;
    height: 510rem;
    background: #FFFFFF;
    border-radius: 20rem;

    .label {
        pointer-events: none;
        position: absolute;
        right: 10rem;
        top: 294rem;
        z-index: 2;
        padding: 0 7rem;
        height: 30rem;
        line-height: 30rem;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 8rem;
        text-align: center;
        font-size: 22rem;
        font-weight: 400;
        color: #FFFFFF;
    }

    img {
        width: 334rem;
        height: 334rem;
        border-radius: 20rem 20rem 0 0;
        object-position: center;
        object-fit: cover;
    }

    .desc {
        padding: 15rem 15rem 0 15rem;
        height: 114rem;

        p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 26rem;
            font-weight: bold;
            color: #333333;
            line-height: 38rem;
        }
    }

    .price {
        padding: 0 0rem 0 15rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            font-size: 32rem;
            font-weight: bold;
            color: #FD6404;

            i {
                font-size: 24rem;
                font-weight: bold;
                color: #FD6404;
                font-style: initial;
            }

            &:nth-of-type(2) {
                margin-left: 15rem;
                flex: 1;
                font-size: 24rem;
                font-weight: 400;
                color: #999999;
                text-decoration: line-through
            }

            &:nth-of-type(3) {
                padding-left: 20rem;

                img {
                    width: 70rem;
                    height: 32rem;
                    object-fit: contain;
                    object-position: center;
                }
            }
        }
    }
}
</style>